<template>
    <div id="vuex">vuex
        <p>
            <button @click="reduceCount(30)">-</button>
            {{count}}--{{age}}--{{gender}}--{{money}}--{{fullname}}
            <button  @click="addCount(20)">+</button>
        </p>
    </div>
</template>
<script>
//文件夹里面的是index.js文件，可以直接省略不写。store文件的同级中有store.js则会读取的是store.js;
import store from '@/store';
//原始写法
// import Vuex from 'vuex';
//映射到vuex里面具体的方法
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
export default {
    store,
    //最原始的写法
    // computed:function(){
    //     return this.$store.state.age;
    // },
    //es6简化后的写法，后面可以跟重新定义的方法
    // computed:mapState({
    //     count:state=>state.count,
    //     age:state=>state.age,
    //     gender:state=>state.gender,
    //     myabc:function(){
    //         return 123;
    //     }
    // }),
    //es6最简单的写法，后面不不不可以跟重新定义的方法
    // computed:mapState(['age','count','gender']),

    //es6里面的...语法
    computed:{
        ...mapState(['age','count','gender']),
        ...mapGetters(['money','fullname']),
    },

    //原始写法
    // methods:{
    //     addCount(){
    //         this.$store.commit('addCount');
    //     }
    // },
    //es6最简单的写法，
    methods:{
        ...mapMutations(['addCount','reduceCount']),
        ...mapActions(['addCount2','reduceCount2']),
    }
    

}
</script>

